<template>
  <div class="shot">
    <div class="breadCrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">Viewer</el-breadcrumb-item>
        <el-breadcrumb-item>Retrieve Waveform</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content" style="width: 100%">
      <div class="topbox">
        <div class="shot-top">
          <div class="shot-l">
            <div class="for">
              <div
                v-for="(item, index) in listApi"
                :key="index"
                class="item"
                v-show="index <= 4"
              >
                <div class="icon" @click="deleteChart(item)">
                  <i class="el-icon-close"></i>
                </div>
                <div class="box-card">
                  <div
                    :class="'charts' + index"
                    style="width: 100%; height: 100%"
                  ></div>
                </div>
              </div>
            </div>
            <div class="p" @click="goBackTo">Add query waveform</div>
          </div>
          <div class="shot-right">
            <div>
              <el-button
                type="primary"
                style="
                  width: 120px;
                  height: 40px;
                  line-height: 10px;
                  font-size: 18px;
                "
                >Search</el-button
              >
              <el-button
                style="
                  width: 120px;
                  height: 40px;
                  line-height: 10px;
                  font-size: 18px;
                "
                >Reset</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-table :data="formData" border style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" align="center">
      </el-table-column>
      <el-table-column prop="num" label="Shoutnum" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="attribute"
        label="Major Paramentrs"
        width="350"
        align="center"
      >
        <template slot-scope="scope">
          <div class="it">
            <div
              v-for="(value, name, index) in scope.row.attribute"
              :key="index"
              class="item-s"
            >
              <div class="flex">
                <div class="text">
                  <strong>{{ name }}:</strong>{{ value }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="chart" width="auto" ref="column">
        <template slot-scope="scope">
          <div class="chart">
            <div
              v-for="(item, index) in scope.row.chart"
              :key="index"
              :class="'charts-item' + index"
              style="width: 30%; height: 100%"
            ></div>
            <i
              class="el-icon-arrow-right"
              style="font-size: 40px; line-height: 260px"
              @click="nextPage"
            ></i>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="foot">
      <div>total:100</div>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      editableTabsValue: 1,
      shotlist: [
        {
          chartName: "chart1",
          title: "ABCD",
        },
        {
          chartName: "chart1",
          title: "ABCD",
        },
      ],
      listApi: [
        { id: 0, text: "WMHD" },
        { id: 1, text: "WMHD" },
        { id: 2, text: "WMHD" },
        { id: 3, text: "WMHD" },
      ],
      chart: {
        option1: {
          xAxis: {
            type: "category",
            data: [],
          },
          yAxis: {
            type: "value",
            show: false,
          },
          series: [
            {
              data: null,
              type: "line",
            },
          ],
        },
        option2: {
          xAxis: {
            type: "category",
            data: [],
          },
          yAxis: {
            type: "value",
            show: false,
          },
          series: [
            {
              data: null,
              type: "line",
            },
          ],
        },
      },
      formData: [
        {
          date: this.$date(new Date()),
          num: 562552,
          attribute: {
            ip: "450.5KJ",
            pulse: "12.5s",
            destiny: "3.49e19/m3",
            betan: 0.34,
            betap: 0.37,
            wmhd: "405.5KJ",
            heating: "LHCD, NBI",
            li: 1.57,
            rOC: 219.0,
            shape: "Double Null",
          },
          chart: [
            [150, 230, 224, 218, 135, 147, 260],
            [150, 230, 224, 218, 135, 147, 260],
          ],
        },
        {
          date: this.$date(new Date()),
          num: 562552,
          attribute: {
            ip: "450.5KJ",
            pulse: "12.5s",
            destiny: "3.49e19/m3",
            betan: 0.34,
            betap: 0.37,
            wmhd: "405.5KJ",
            heating: "LHCD, NBI",
            li: 1.57,
            rOC: 219.0,
            shape: "Double Null",
          },
          chart: [
            [150, 230, 224, 218, 135, 147, 260],
            [150, 230, 224, 218, 135, 147, 260],
          ],
        },
        {
          date: this.$date(new Date()),
          num: 562552,
          attribute: {
            ip: "450.5KJ",
            pulse: "12.5s",
            destiny: "3.49e19/m3",
            betan: 0.34,
            betap: 0.37,
            wmhd: "405.5KJ",
            heating: "LHCD, NBI",
            li: 1.57,
            rOC: 219.0,
            shape: "Double Null",
          },
          chart: [
            [150, 230, 224, 218, 135, 147, 260],
            [150, 230, 224, 218, 135, 147, 260],
          ],
        },
        {
          date: this.$date(new Date()),
          num: 562552,
          attribute: {
            ip: "450.5KJ",
            pulse: "12.5s",
            destiny: "3.49e19/m3",
            betan: 0.34,
            betap: 0.37,
            wmhd: "405.5KJ",
            heating: "LHCD, NBI",
            li: 1.57,
            rOC: 219.0,
            shape: "Double Null",
          },
          chart: [
            [150, 230, 224, 218, 135, 147, 260],
            [150, 230, 224, 218, 135, 147, 260],
          ],
        },
      ],
      chartList: [],
      chartList2: [],
      id: null,
      timer: null,
    };
  },
  mounted() {
    this.chartDom();
    this.initEcharts();

    window.addEventListener("resize", this.load, false);

    // 方法
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.load, false);
  },
  methods: {
    load() {
      this.chartList.forEach((e) => {
        e.dispose();
      });
      this.chartList2.forEach((e) => {
        e.dispose();
      });
      this.chartList.length = 0;
      this.chartList2.length = 0;
      this.initEcharts();
      this.chartDom();
    },
    getMax() {
      let base = +new Date(2018, 9, 3);
      let oneDay = 24 * 3600;
      let data = [[base, Math.random() * 3]];
      for (let i = 1; i < 30000; i++) {
        let now = new Date((base += oneDay));
        let newD = Math.round((Math.random() - 0.5) * 2 + data[i - 1][1]);
        data.push([+now, newD]);
      }
      return data;
    },
    nextPage() {
      this.$router.push("/shot");
    },
    goBackTo() {
      this.$router.push("/waveform");
    },
    handleCurrentChange() {},
    handleSizeChange() {},
    handleClick(tab, event) {
      console.log(tab, event);
    },
    initEcharts() {
      this.$nextTick(() => {
        for (let i = 0; i < this.listApi.length; i++) {
          var myChart1 = echarts.init(document.querySelector(`.charts${i}`));
          this.chartList.push(myChart1);
          this.chart.option1.series[0].data = this.getMax();
          this.chart.option1 && myChart1.setOption(this.chart.option1, true);
        }
      });
    },
    chartDom() {
      let charts;
      this.$nextTick(() => {
        for (let j = 0; j < this.formData.length; j++) {
          let a = document.getElementsByClassName("chart")[j];
          for (let i = 0; i < this.formData[j].chart.length; i++) {
            let b = a.children[i];
            charts = echarts.init(b);
            this.chartList2.push(charts);
            this.chart.option2.series[0].data = this.getMax();
            charts.setOption(this.chart.option2, true);
          }
        }
      });
    },
    deleteChart(item) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.log(item);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
  },
  props: [],
  components: {},

  computed: {},
  filters: {},
};
</script>

<style lang="less" scoped>
.shot {
  width: 100%;
  height: calc(100vh - 165px);
  // background-color: #e9e9e9;
  .breadCrumb {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 20px;
    padding: 0 10px 10px;
    span {
      color: #238ae9;
    }
  }
  .content {
    width: 100%;
    border-bottom: 2px solid #eee;
    .topbox {
      padding: 10px;
      .shot-top {
        display: flex;
        height: 180px;
        .shot-l {
          width: 75%;
          height: 100%;
          display: flex;
          overflow: hidden;
          border-right: 1px solid #ccc;
          border-radius: 5px;
          .for {
            display: flex;
            .item {
              width: 300px;
              height: 100%;
              border: 1px solid #ccc;
              margin-right: 5px;
              position: relative;
              .icon {
                position: absolute;
                right: 20px;
                top: 10px;
                z-index: 999;
              }
              .box-card {
                width: 100%;
                height: 120%;
              }
            }
          }
          .p {
            float: left;
            font-size: 14px;
            color: #2e81d4;
            text-decoration: underline;
            margin-top: 158px;
          }
        }
        .shot-right {
          width: 25%;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          // padding: 10px;
        }
      }
    }
  }
  .it {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    .item-s {
      .flex {
        .text {
        }
      }
    }
  }
  /deep/ tbody {
    tr {
      height: 120px !important;
    }
    .cell {
      .chart {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: space-around;
      }
    }
  }
  .foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
